<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<!-- 四个角的直角装饰 -->
			<view class="corner corner-top-left"></view>
			<view class="corner corner-top-right"></view>
			<view class="corner corner-bottom-left"></view>
			<view class="corner corner-bottom-right"></view>
		</view>
		<slot></slot>
	</view>
</template>

<script setup></script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f7f5f0;
		background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
		overflow: hidden;
		font-family: 'Microsoft YaHei', '微软雅黑', 'SimSun', '宋体', serif;
		position: relative;
		padding: 20px;
		width: 100vw;
		height: 100vh;   
	}

	.bg-decoration {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 0;

		.corner {
			position: fixed;
			width: 50px;
			height: 50px;
			border-style: solid;
			border-color: rgba(108, 142, 175, 0.15);
			border-width: 0;
			
			&::after {
				content: '';
				position: absolute;
				width: 8px;
				height: 8px;
				background-color: rgba(108, 142, 175, 0.1);
			}
			
			&::before {
				content: '';
				position: absolute;
				width: 30px;
				height: 30px;
				border-style: solid;
				border-color: rgba(108, 142, 175, 0.1);
				border-width: 0;
			}
			
			&.corner-top-left {
				top: 10px;
				left: 10px;
				border-top-width: 2px;
				border-left-width: 2px;
				
				&::after {
					top: 8px;
					left: 8px;
				}
				
				&::before {
					top: 6px;
					left: 6px;
					border-top-width: 1px;
					border-left-width: 1px;
				}
			}
			
			&.corner-top-right {
				top: 10px;
				right: 10px;
				border-top-width: 2px;
				border-right-width: 2px;
				
				&::after {
					top: 8px;
					right: 8px;
				}
				
				&::before {
					top: 6px;
					right: 6px;
					border-top-width: 1px;
					border-right-width: 1px;
				}
			}
			
			&.corner-bottom-left {
				bottom: 10px;
				left: 10px;
				border-bottom-width: 2px;
				border-left-width: 2px;
				
				&::after {
					bottom: 8px;
					left: 8px;
				}
				
				&::before {
					bottom: 6px;
					left: 6px;
					border-bottom-width: 1px;
					border-left-width: 1px;
				}
			}
			
			&.corner-bottom-right {
				bottom: 10px;
				right: 10px;
				border-bottom-width: 2px;
				border-right-width: 2px;
				
				&::after {
					bottom: 8px;
					right: 8px;
				}
				
				&::before {
					bottom: 6px;
					right: 6px;
					border-bottom-width: 1px;
					border-right-width: 1px;
				}
			}
		}
		
		&::before, &::after {
			content: '';
			position: fixed;
			width: 100px;
			height: 1px;
			background-color: rgba(108, 142, 175, 0.08);
		}
		
		&::before {
			top: 70px;
			left: 20px;
		}
		
		&::after {
			bottom: 70px;
			right: 20px;
		}
	}
</style>
